/***
 * width: 容器的宽度
 * height: 容器的高度
 * data: 二维数据源
 * className: 类名
 * renderTitle 函数返回 组件，渲染只是日期
 * renderNode 函数返回组价么渲染自定义内容
 */

import React from 'react'
import classNames from 'classnames'
import { Timeline } from 'antd'
import EmptyData from '@/components/emptyData'
import styles from './style.module.less'

class CustomTimeline extends React.PureComponent {
  renderTimelineItem = () => {
    const { data, renderNode, renderTitle, width = 386, height = 308 } = this.props

    const TimelineItem = data.map((arry, i) => (
      <Timeline.Item key={i} color="#558cff">
        <div className={styles.item}>
          <div className={styles.itemSign}>{renderTitle(arry)}</div>
          <div>
            {arry.map((item, index) => (
              <div style={{ width, height }} className={styles.listContainer} key={index}>
                {renderNode(item)}
              </div>
            ))}
          </div>
        </div>
      </Timeline.Item>
    ))
    return TimelineItem
  }

  render() {
    const { className, showLeft, text, data } = this.props
    return (
      <div className={classNames(styles.timeline, className)}>
        <div>
          {text ? (
            <p className={styles.timelineText} style={{ display: showLeft }}>
              {text}
            </p>
          ) : (
            ''
          )}
        </div>
        {data.length ? (
          <Timeline pending pendingDot={<font color="#558cff">结束</font>} mode="left">
            {this.renderTimelineItem()}
          </Timeline>
        ) : (
          <EmptyData size="sm" />
        )}
      </div>
    )
  }
}
export default CustomTimeline
